import React, { useEffect } from 'react'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import { TYPE, STATE } from '@/const'
const Pie = ({ countByTypeDate }) => {
    let type = Object.keys(countByTypeDate).map(v => {
        return TYPE[v]
    })
    let data = Object.keys(countByTypeDate).map(v => {
        return { name: TYPE[v], value: countByTypeDate[v] }
    })
    useEffect(() => {
        let myChart = echarts.init(document.getElementById('pie'))
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: type
            },
            series: [
                {
                    name: '新闻数量占比',
                    type: 'pie',
                    radius: ['55%', '80%'],
                    center: ['50%', '60%'],
                    data: data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal: {
                            color: function(params) {
                                //自定义颜色
                                var colorList = ['#9966FF', '#990033', '#9900CC', '#CC00CC', '#660099', '#CC0066']
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        })
        window.addEventListener('resize', function() {
            myChart.resize()
        })
    }, [type])

    return <div id='pie' style={{ height: 300 }}></div>
}

export default Pie
